<template>
  <div class="crud-menu-right" v-if="crud && crud.option">
    <el-tooltip content="刷新" placement="top">
      <el-button
        :loading="crud.tableLoading"
        :size="crud.option.size"
        class="crud-menu-right-item"
        @click="crud.refreshChange"
      >
        <template #icon>
          <img src="@/assets/images/menu-right/refresh.svg">
        </template>
      </el-button>
    </el-tooltip>
    <el-tooltip content="导出" placement="top">
      <el-button
        :loading="crud.downloading"
        :disabled="crud.tableLoading"
        :size="crud.option.size"
        class="crud-menu-right-item"
        @click="downloadOpen = true"
        v-if="!!props.download && hasDownloadPermission()"
      >
        <template #icon>
          <img src="@/assets/images/menu-right/download.svg">
        </template>
      </el-button>
    </el-tooltip>
    <el-tooltip content="列显隐" placement="top">
      <el-button
        :disabled="crud.tableLoading"
        :size="crud.option.size"
        class="crud-menu-right-item"
        @click="onClickColumn"
        v-if="$attrs.columnBtn !== false"
      >
        <template #icon>
          <img src="@/assets/images/menu-right/column.svg">
        </template>
      </el-button>
    </el-tooltip>
    <!-- <el-tooltip content="切换显示" placement="top">
      <el-button
        :disabled="crud.tableLoading"
        :size="crud.option.size"
        class="crud-menu-right-item"
        @click="crud.handleGridShow"
      >
        <template #icon>
          <img src="@/assets/images/menu-right/grid.svg">
        </template>
      </el-button>
    </el-tooltip> -->
  </div>
  <template v-if="downloadOpen">
    <CrudDownload
      v-model="downloadOpen"
      :crudRef="crud"
      :option="props.download instanceof Boolean ? {} : props.download"
    />
  </template>
</template>

<script setup name="CrudMenuRight">
import CrudDownload from './Download/index.vue'

const { proxy } = getCurrentInstance()

const props = defineProps({
  crudRef: {
    type: Object,
    default: () => ({})
  },
  download: {
    type: [Boolean, Object],
    default: false
  }
})
const crud = computed(() => props.crudRef)

const columnData = ref([])

const route = useRoute()

watch(
  () => crud.value.tableLoading,
  (val, _val) => {
    if (_val && !val) {
      if (columnData.value.length > 0) {
        crud.value.$refs.dialogColumn.data = columnData.value
      }
    }
  }
)
watch(
  () => crud.value?.data?.length,
  (val, _val) => {
    if ((_val === 0 && val > 0) || (_val > 0 && val === 0)) {
      if (columnData.value.length > 0) {
        crud.value.$refs.dialogColumn.data = columnData.value
        props.crudRef.option.column = crud.value.option.column.map((item) => {
          const tem = columnData.value.find(v => v.prop === item.prop)
          if (tem && tem instanceof Object) {
            item = {
              ...item,
              ...tem
            }
          }
          return item
        })
      }
    }
  }
)

const hasDownloadPermission = () => {
  return true;
  // const _route = route.path.slice(1).split('/').join(':')
  // let permission = [`${_route}:export`]

  // if (props.download && props.download instanceof Object) {
  //   if (props.download.permissions) {
  //     permission = props.download.permissions
  //   }
  // }
  // return proxy.ifHasPermission(permission)
}

const onClickColumn = () => {
  crud.value.$refs.dialogColumn.defaultColumn.forEach((item, index) => {
    if (item.prop === 'filters') {
      crud.value.$refs.dialogColumn.defaultColumn.splice(index, 1)
    }
  })
  let _data = []
  if (columnData.value.length === 0) {
    _data = crud.value.columnOption.filter(i => i && !i.hide)
    columnData.value = _data
  }
  nextTick(() => {
    crud.value.$refs.dialogColumn.handleShow()
    crud.value.$refs.dialogColumn.data = columnData.value
  })
}
const downloadOpen = ref(false)

</script>

<style lang="scss" scoped>
.crud-menu-right {
  .crud-menu-right-item {
    // width: 36px;
    height: 36px;
    padding: 10px;
  }
  .crud-menu-right-item.el-button--small {
    height: 30px;
    padding: 8px;
  }
  .crud-menu-right-item.is-disabled {
    filter: grayscale(100%);
  }
}
</style>